<template>
  <div class="main_content AddOrEditPersonal">
    <father-title :title="fatherTitle"></father-title>
    <div class="contentBox">
      <!-- <header-line :title="headerTitle"></header-line> -->
      <div class="middleBox">
        <search-box @clickSearch="search">
          <template slot="left">
            <Input v-model="searchParams.name" placeholder="订单号" clearable></Input>
            <Input v-model="searchParams.locaiton" placeholder="商品名称" clearable></Input>
          
          </template>

          <!-- <template slot="right">
            <Button v-if="$store.state.perms.includes('sys:schedule:save')" type="primary" @click="addData">添加商品</Button>
          </template> -->
        </search-box>
        <v-table :loading="pageConfig.loading" ref="selection" border :columns="columns" :data="list">
          <template slot-scope="{ row }" slot="status">
            <span>{{status.find((item)=>item.value===row.status).key}}</span>
          </template>
          <template slot-scope="{ row }" slot="operation">
            <Button v-if="$store.state.perms.includes('sys:role:update')" type="primary" size="small" @click="editData(row)">编辑</Button>
            <Button v-if="$store.state.perms.includes('sys:role:delete')" class="button_spacing" type="error" size="small" @click="stopUse(row)">停用</Button>
          </template>
        </v-table>
        <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
      </div>
    
     
    <AddOrEditModal
        v-model="modalCTL.show"
        :title="modalCTL.title"
        :loading="modalCTL.loading"
        width="50%"
        @on-ok="save">
      <Form
          ref="form"
          :model="formValidate"
          :rules="ruleValidate"
          label-position="left"
          :label-width="100"
          slot="content">
        <FormItem label="名称" prop="newPassword">
          <Input type="text" v-model="formValidate.newPassword" placeholder="请输入名称" />
        </FormItem>
        <FormItem label="简介" prop="confirmPassword">
          <Input type="textarea" v-model="formValidate.confirmPassword" placeholder="请输入发布数量" />
        </FormItem>
        <FormItem label="图片" prop="confirmPassword">
          <Upload
              ref="upload"
              :show-upload-list="false"
              :default-file-list="defaultList"
              :on-success="handleSuccess"
              :format="['jpg', 'jpeg', 'png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              action="//jsonplaceholder.typicode.com/posts/"
              style="display: inline-block;width:58px;"
            >
              <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
        </FormItem>
        <FormItem label="价格" prop="confirmPassword">
          <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车费用" />
        </FormItem>
        
        <FormItem label="详情" prop="confirmPassword">
          <Input type="textarea" v-model="formValidate.confirmPassword" placeholder="请输入停车费用" />
        </FormItem>
      </Form>
    </AddOrEditModal>
    </div>
  </div>
</template>

<script>
import {columns, pageConfig, formValidate, ruleValidate, status} from "./pageConfig";
export default {
  name: 'ParkingLot',

  data() {
    return {
    
      fatherTitle: "订单管理",
      modalCTL: {
        show: false,
        loading: true,
        title: "订单详情"
      },
      cityList:[
          {
              value:1,
              label:"测试"
          }
      ],
      columns,
      pageConfig,
      formValidate: {...formValidate},
      ruleValidate,
      status,
      list: [
       
      ],
      searchParams:{

      },
      defaultList: [
        {
          name: "image-demo-1.jpg",
          url: "https://file.iviewui.com/images/image-demo-1.jpg",
        },
        {
          name: "image-demo-2.jpg",
          url: "https://file.iviewui.com/images/image-demo-2.jpg",
        },
      ],
      imgName: "",
      visible: false,
      uploadList: [],
      // search
    };
  },

  mounted() {

  },

  computed: {},

  methods: {
    search(){

    },
    addData(){
      this.modalCTL.show = true;
    },
    editData(row){

    },
    stopUse(row){

    },
    getList(){

    },
    save(){

    },
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      file.url = "https://file.iviewui.com/images/image-demo-3.jpg";
      file.name = "image-demo-3.jpg";
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "The file format is incorrect",
        desc:
          "File format of " +
          file.name +
          " is incorrect, please select jpg or png.",
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "Exceeding file size limit",
        desc: "File  " + file.name + " is too large, no more than 2M.",
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded.",
        });
      }
      return check;
    },
  }
};
</script>

<style scoped lang="less">
.flexOut{
  display: flex;
  align-items: center;
  // justify-content: space-between;
  /deep/ .ivu-form-item-content{
    display: flex;  
    margin-left: 0!important;
   
    span{
      width: 50px;
      flex-shrink: 0;
      display: inline-block;
      margin-left: 10px!important;
    }
    .icons{
      margin-right: 10px;
    }
  }
}

.AddOrEditPersonal {
  .contentBox{
    overflow-y: scroll;
  
  }
  .form{
    display: flex;
    flex-direction: column;
    width: 800px;
    padding: 20px;
    flex: 1;
  }
}
</style>